<template>
    <view class="addForm">
        <!-- <u-swiper :list="list1" @click="click" indicator indicatorMode="line" circular :autoplay='true' imgMode=''></u-swiper> -->

        <view class="form2Plan">
            <!-- <u-alert title="为了给您提供更快更便捷的服务，请填写正确信息" type="warning" :description="description"></u-alert> -->
            <h1 style="font-weight: 600;color:#4683F3;font-size:30rpx">为了给您提供更快更便捷的服务，请填写正确信息</h1>
            <h1 style="margin: 30rpx 0 10rpx 0;font-weight: 600;">身份信息</h1>
            <view class="action">
                <view class="upload-box">
                    <u--form labelPosition="top" :model="model1" ref="uForm">
                        <template>
                            <view class="current2">
                                <u-form-item label="姓名" prop="name" borderBottom labelWidth="200" required>
                                    <u--input v-model="model1.name" disabledColor="#ffffff" placeholder="请输入姓名" border="none"></u--input>
                                </u-form-item>
                                <u-form-item label="手机号码" prop="phone" borderBottom labelWidth="200" required>
                                    <u--input v-model="model1.phone" disabledColor="#ffffff" placeholder="请输入手机号码" border="none"></u--input>
                                </u-form-item>
                                <u-form-item label="办事窗口" prop="windowNum" borderBottom labelWidth="200" required>
                                    <u--input v-model="model1.windowNum" disabledColor="#ffffff" placeholder="请输入办事窗口" border="none"></u--input>
                                </u-form-item>
                                <u-form-item label="留言内容" prop="content" borderBottom labelWidth="200" required>
                                    <u--input v-model="model1.content" disabledColor="#ffffff" placeholder="请输入留言内容" border="none"></u--input>
                                </u-form-item>
                            </view>
                        </template>
                    </u--form>
                </view>
                <view style="padding-bottom: 50px;display: flex;">
                    <!-- <u-button class="buttonNext" type="primary" text="立即上报" customStyle="margin-top: 50px;" @click="submit"></u-button> -->
                    <u-button class="buttonNext" type="primary" text="提交" :disabled="disabledBtn" customStyle="margin-top: 50px;"
                        @click="submit"></u-button>
                </view>
            </view>
            <!-- 状态选择 -->
            <!-- <u-picker :show="showcoordinateLead" :columns="userList" @cancel="closecoordinateLead" @confirm="confirmcoordinateLead"
                keyName="userName"></u-picker> -->
        </view>
        <cc-bottom />
    </view>
    <!-- </commonHtml> -->
</template>

<script>
import Validate from "../utils/tools/validate.js";
export default {
    data() {

        return {
            infoData: {},
            showPost: false,
            showName: false,
            showIndustry: false,
            showRegion: false,
            actions: [{
                name: '男',
            },
            {
                name: '女',
            },
            {
                name: '保密',
            },
            ],
            fileList1: [],
            fileList2: [],
            fileList3: [],
            fileList4: [],
            fileList: [],
            columns: [],
            model1: {
                peopleName: '',
                passportImg: '',
                headPhoto: '',
                // teamList: [{
                //     peopleName: '',
                //     phone: '',
                // }]
                // address: "qwewqe",
                // contactsName: "13",
                // contactsPhone: "13244556677",
                // id: "1",
                // maritalStatus: "0",
                // orderType: "0",
                // passportImg: "https://lgqj.oss-cn-beijing.aliyuncs.com/2024/06/25/171932266011168acc1b138d34ff8bfa6e5500f81b92b",
                // peopleName: "wew",
                // phone: "13214556677",
                // workStatus: "0",
            },
            passportImgList: [],
            headPhotoList: [],


            current: 1,
            rules: {
                name: [{
                    required: true,
                    message: '请输入姓名',
                    trigger: ['blur', 'change']
                }],
                phone: [{
                    type: "string",
                    required: true,
                    message: "请输入手机号码",
                    trigger: ["blur"],
                },
                {
                    validator: Validate.isMobile,
                },
                ],

                windowNum: [{
                    required: true,
                    message: '请输入办事窗口',
                    trigger: ['blur', 'change']
                }],

                content: [{
                    required: true,
                    message: '请输入留言内容',
                    trigger: ['blur', 'change']
                },],
                // 'items.*.phone': [
                //     { required: true, message: '请输入项目内容', trigger: 'blur' }
                // ]
            },
            industry: [],
            models: {},
            selectData: [],
            keywordName: [],
            showcoordinateLead: false,
            userList: [],
            nationalItem: {},
            disabledBtn: false,
            teamItemRulesShow: false

        }
    },
    components: {},
    onLoad(option) {
        this.id = option.id
        this.orderType = option.orderType
        this.statusBarHeight = uni.getStorageSync('statusBarHeight')
    },
    onReady() {
        this.$refs.uForm.setRules(this.rules)
    },
    methods: {
        snapIsMobile(value) {
            // 正则失败false，取反true抛出异常
            if (!/^1[0-9]{10}$/.test(value)) {
                // 抛出异常，验证规则有错
                return true
            } else {
                return false
            }
        },
        // 删除团队成员
        deleteTeam(index) {
            this.model1.teamList.slice(index, 1)
        },
        // 添加团队成员
        addTeam() {
            let length = this.model1.teamList.length - 1
            if (!this.model1.teamList[length].peopleName || !this.model1.teamList[length].phone) {
                this.teamItemRulesShow = true
                return
            }
            else if (this.snapIsMobile(this.model1.teamList[length].phone)) {
                this.teamItemRulesShow = true
                return
            }
            else {
                this.teamItemRulesShow = false
                this.model1.teamList.push({
                    peopleName: '',
                    phone: '',
                })
            }
        },
        onlyNumOnePoint(number_only) {
            //先把非数字的都替换掉，除了数字和小数点  
            number_only = number_only.replace(/[^\d]/g, "");
            //必须保证第一个为数字而不是小数点   
            number_only = number_only.replace(/^\./g, "")
            //保证只有出现一个小数点而没有多个小数点  
            number_only = number_only.replace(/\.{2,}/g, ".");
            //保证小数点只出现一次，而不能出现两次以上  
            number_only = number_only.replace(".", "$#$").replace(/\./g, "").replace("$#$", ".");
            //保证只能输入两个小数   
            number_only = number_only.replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3');
            console.log(number_only);
            return number_only;
        },
        nameSelect(val) {
            // console.log(val)
            this.model1 = val
        },
        groupChange(e) {
            // console.log(e)
            this.industry.forEach(item => {
                if (e == item.id) {
                    // this.model1 = item
                    this.model1.industryId = item.id
                    this.models.name = item.industry
                    this.models.industryId = item.id
                    this.models.id = item.id
                    this.models.industryName = item.industry

                }
            })
        },
        searchName() {
            this.$asynApi.getIndustryList({
                industry: this.keywordName
            }).then(res => {
                console.log(res)
                this.industry = res.data
            })
        },
        regionSelect(val) {
            this.models.regionName = val.name
            this.model1.region = val.id
        },
        changeHandler(e) {
            const {
                columnIndex,
                value,
                values, // values为当前变化列的数组内容
                index,
                // 微信小程序无法将picker实例传出来，只能通过ref操作
                picker = this.$refs.uPicker
            } = e
            // 当第一列值发生变化时，变化第二列(后一列)对应的选项
            if (columnIndex === 0) {
                // picker为选择器this实例，变化第二列对应的选项
                picker.setColumnValues(1, this.columnData[index])
            }
        },
        industrySelect(val) {
            this.models = val

        },
        // 岗位
        getIndustryList() {
            this.$asynApi.getIndustryList().then(res => {
                const {
                    code,
                    data
                } = res
                if (code === 200) {
                    let datas = []
                    data.forEach(v => {
                        let singleData = {
                            id: v.id,
                            name: v.industry
                        }
                        datas.push(singleData)
                    })
                    this.industry = datas
                }

            })
        },

        // 选择
        choosecoordinateLead() {
            this.showcoordinateLead = true
        },
        closecoordinateLead() {
            this.showcoordinateLead = false
        },

        confirmcoordinateLead(e) {
            this.showcoordinateLead = false
            this.model1.coordinateLead = e.value[0].id
            this.model1.coordinateLeadName = e.value[0].userName
        },
        // 新增图片
        async afterRead(event, key, mkey) {
            // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
            let that = this
            this[key].push({
                url: event.file.url
            })
            this.disabledBtn = true
            uni.showLoading({
                title: '上传中'
            });

            uni.uploadFile({
                url: this.$baseUrl + '/system/base/upload', // 仅为示例，非真实的接口地址
                filePath: event.file.url,
                name: 'file',
                formData: {
                    user: 'test'
                },
                header: {
                    token: uni.getStorageSync('userInfos').token
                },
                success: (res) => {
                    this.disabledBtn = false
                    uni.hideLoading();
                    const val = JSON.parse(res.data)
                    if (val.code == 200) {
                        let snapattachment = []
                        if (that.model1[mkey].length) {
                            snapattachment = that.model1[mkey].split(',')
                        }
                        snapattachment.push(val.data)
                        that.model1[mkey] = snapattachment.join(',')
                        that.model1 = JSON.parse(JSON.stringify(that.model1))
                    }
                },
                fail: (err) => {
                    this.disabledBtn = false
                    uni.hideLoading();
                },
                complete: (complete) => {
                    this.disabledBtn = false
                    uni.hideLoading();
                },
            });
        },
        // 删除图片
        deletePic(event, key, mkey) {
            let snapattachment = this.model1[mkey].split(',')
            snapattachment.splice(event.index, 1)
            this.model1[mkey] = snapattachment.join(',')
            this[key].splice(event.index, 1)
            this.model1 = JSON.parse(JSON.stringify(this.model1))
        },
        // 下一步/提交
        submit() {
            let that = this

            // uni.showToast({
            //     title: '操作成功',
            //     // title: e.errMsg,
            //     icon: 'none'
            // });
            // setTimeout(function () {
            //     uni.navigateBack({ delta: 1 });
            // }, 1000)

            // return

            // 团队验证
            // let length = this.model1.teamList.length - 1
            // if (!this.model1.teamList[length].peopleName || !this.model1.teamList[length].phone) {
            //     this.teamItemRulesShow = true
            //     return
            // }
            // else if (this.snapIsMobile(this.model1.teamList[length].phone)) {
            //     this.teamItemRulesShow = true
            //     return
            // }

            that.$refs.uForm.validate().then(res => {
                let param = { ...that.model1 }
                this.disabledBtn = true
                uni.showLoading({
                    title: '提交中'
                })

                //     delete param.workStatus
                //     delete param.coordinateLeadName
                //     param.reportedQuantity = Number(param.reportedQuantity)
                console.log(param)
                that.$asynApi.systemComplaint(param).then(res => {
                    if (res.code === 200) {

                        uni.showToast({
                            title: '操作成功',
                            // title: e.errMsg,
                            icon: 'none'
                        });
                        setTimeout(function () {
                            uni.navigateBack({ delta: 1 });
                        }, 1000)
                    }
                    else {
                        uni.showToast({
                            title: res.msg,
                            // title: e.errMsg,
                            icon: 'none'
                        });
                        that.disabledBtn = false
                    }
                })
            })
        }
    },
}
</script>

<style scoped lang="scss">
page {
    width: 100%;
    height: 100%;
}
.addForm {
    // background: radial-gradient(4000rpx 1000rpx at 300rpx 0, #d9eaf8, #f6f7fb);
    background-color: #fff;
    // background-color: #eee;
}

.form2Plan {
    // position: relative;

    padding: 30rpx;

    // position: relative;
    // top: -100rpx;
    .topBox {
        width: 100%;
        // background-color: #fff;
        border-radius: 10rpx;
        left: 30rpx;
        .topNational {
            border-radius: 10rpx 10rpx 0rpx 0rpx;
            background-size: 100% 100%;
            padding: 34rpx 34rpx 34rpx 34rpx;
            text-align: center;
            color: #fff;
            // border-bottom: 2rpx #3868ff solid;
            background-image: url("~@/static/addFromTop.png");
            font-size: 38rpx;
            font-weight: 600;
            view:nth-child(1) {
                font-size: 38rpx;
                font-weight: 600;
            }
            view:nth-child(2) {
                font-size: 20rpx;
                font-weight: 500;
            }
        }
        .topTitle {
            background-size: 100% 100%;
            padding: 34rpx 34rpx 10rpx 34rpx;
            // text-align: center;
            color: #000;
            font-size: 32rpx;
            // font-weight: 600;
        }
        .topText {
            padding: 34rpx;
            display: flex;
            justify-content: center;
            color: #333;
            text-align: center;
            .item {
                border-right: 1rpx rgb(236, 236, 236) solid;
                width: 30%;
                view:nth-child(1) {
                    font-size: 26rpx;
                }
                view:nth-child(2) {
                    margin-top: 10rpx;
                    color: #666;
                    font-size: 22rpx;
                }
            }
        }
        margin-bottom: 30rpx;
    }
    .top-box {
        height: 434rpx;
        // background: url("/static/login/top-bg.jpg") no-repeat;
        background-size: 100% 100%;
        padding-top: 60rpx;
        box-sizing: border-box;

        .top-title {
            width: 460rpx;
            font-size: 44rpx;
            line-height: 60rpx;
            color: #ffffff;
            text-align: center;
            margin: 100rpx auto 0;
        }
    }
    .action {
        width: 100%;
        min-height: calc(100vh - 60rpx);
        // background-color: #fff;
        border-radius: 50rpx 50rpx 0 0;
        box-sizing: border-box;
        // margin-top: 30rpx;

        .title-box {
            font-size: 32rpx;
            color: #3d3d3d;
            line-height: 120rpx;
        }

        .upload-box {
            // height: 330rpx;
            // background-color: #f5f5f8;
            border-radius: 10rpx;
            display: flex;
            justify-content: space-between;
            width: calc(100% - 80rpx);
            background-color: #ffffff;
            padding: 0rpx 40rpx 20rpx 40rpx;

            /deep/.u-line {
                display: none;

                border: none;
            }

            .upload-l {
                width: 45%;
            }

            /deep/.u-form {
                width: 100% !important;
            }

            // /deep/.u-upload__wrap {
            //     flex-direction: row-reverse;
            // }

            .current2 {
                .teamListBox {
                    display: flex;
                    .tipError {
                        text-align: right;
                        font-size: 24rpx;
                        color: #f56c6c;
                    }
                }
                /deep/.u-form-item__body {
                    flex-direction: column !important;
                    align-items: baseline;
                    border-bottom: #d8d8d8 1rpx solid;
                    margin: 12rpx 0;
                    align-items: flex-start;
                    // border-radius: 5px;
                }

                /deep/.u-form-item__body__right__content {
                    padding: 0;
                    // margin-top: 24rpx;
                    // border: #d8d8d8 1rpx solid;
                    border-radius: 5px;
                }

                /deep/.u-form-item__body__left__content__label {
                    font-weight: 600;

                    span {
                        min-width: 100px;
                    }
                }
                /deep/.u-form-item__body__left {
                    width: fit-content !important;
                    margin-bottom: 20rpx !important;
                }
                // /deep/.uni-input,
                // .uni-input-placeholder,
                // .uni-textarea-placeholder {
                //     // text-align: right;
                // }
                // /deep/.u-textarea {
                //     padding: 0 !important;
                //     background-color: transparent;
                // }
                /deep/.u-radio-group--row {
                    display: block;
                }
                /deep/.u-radio {
                    float: left;
                }
                .formItem {
                    // display: flex;
                    // flex-direction: row;
                    // align-items: center;
                    // flex: 1;
                    padding: 20rpx 0;
                    color: #303133;
                    font-size: 28rpx;
                    font-weight: 600;
                    position: relative;
                    .inputBox {
                        display: flex;
                        width: 100%;
                        align-items: center;
                        justify-content: space-between;
                        border-radius: 5px;
                        .place {
                            color: #c0c4cc;
                            font-weight: 500;
                        }
                    }
                    .required {
                        color: #f56c6c;
                        position: absolute;
                        font-size: 30rpx;
                        left: -15rpx;
                        top: 12px;
                    }
                }
            }
            /deep/.u-form-item__body__right {
                width: 100%;
            }
            /depp/.u-input__content {
                width: 100% !important;
            }
            /deep/.u-input__content__field-wrapper {
                // text-align: right !important;
                width: 100% !important;
            }
            /deep/.u-input__content__field-wrapper__field {
                // text-align: right !important;
                width: 100% !important;
            }
            /deep/.u-form-item__body__right__message {
                font-weight: 400;
                margin-left: 0 !important;
                // text-align: right !important;
            }
            /deep/.u-textarea__field {
                // text-align: right;
            }
            .companyList {
                height: 880rpx;
                width: 100%;
                display: flex;
                flex-direction: column;

                .companyList-tit {
                    padding: 30rpx 0;
                    text-align: center;
                    font-size: 28rpx;
                    border-bottom: solid 2rpx #eee;
                }

                .companyList-search {
                    width: 90%;
                    margin: 20rpx auto;
                }

                .companyList-c {
                    flex: 1;
                    height: 100%;
                    overflow-y: scroll;
                    width: 90%;
                    margin: 0 auto;
                }
                .companyList-btn {
                    background: #3868ff;
                    color: #fff;
                    font-size: 28rpx;
                    border-radius: 10rpx;
                    width: 90%;
                    margin: 20rpx auto 30rpx;
                    text-align: center;
                    padding: 20rpx 0;
                }
            }
        }

        .buttonNext {
            background-color: #3868ff;
            border-radius: 16rpx;
            width: 45%;
        }
    }
}
</style>